

<template>
    <div>
        <el-button @click="dialogVisible = true" icon="el-icon-edit" plain>element-ui弹框table标签</el-button>
        <el-dialog
        title="table标签"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>

        <!-- -------- 因为element-ui的dialog弹出框和iview的dialog弹出框有样式的冲突，所以用Modal这种方式来包裹的-->
        <!-- ---------两种组件的标签混写在一起是可以的，因为它们的命名标签是不同的--------- -->
        <br/><br/>
        <Button type="primary" @click="modal6 = true">iView-admin弹框table标签</Button>
        <Modal
            v-model="modal6"
            title="table标签"
            :loading="loading"
            width='60%'
            @on-ok="asyncOK">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        支撑平台应用商店
                    </div>
                </el-col>
            </el-row>
            <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="资讯" name="first">
                <!-- 内容就是这里面再嵌套组件 -->
                资讯  
            </el-tab-pane>
            <el-tab-pane label="办公" name="second">
                办公
                <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="地址">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                    移除
                    </el-button>
                </template>
                </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="工具" name="third">
                工具
            </el-tab-pane>
            <el-tab-pane label="其它" name="fourth">
                其它
            </el-tab-pane>
            </el-tabs>
        </Modal>

    </div>
</template>

<script>
export default {
    data () {
        return {
            tableBackground: true,
            dialogVisible: false,
            activeName: 'second',
            modal6: false,
            loading: true,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
        // data return end    
        }
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        asyncOK () {
            this.modal6 = false;
        }
    // methods end
    },
    mounted: function(){

    }
};
</script>

<style  scoped>
    .tableBackground{
        background: #f0f0f0;
        color: blue;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        line-height: 36px;
        color: #fff;
        text-indent: 10px;
    }
</style>

